<template>
  <a-input-group compact>
    <a-input style="width: 45%; text-align: center" name="start.name" placeholder="起始" />
    <a-input style="width: 30px; border-left: 0; pointer-events: none" placeholder="~" disabled />
    <a-input
      style="width: 45%; text-align: center; border-left: 0"
      name="end.name"
      placeholder="结束"
    />
  </a-input-group>
</template>

<script lang="ts">
  import { computed, defineComponent, PropType, ref } from 'vue'
  import { useRuleFormItem } from '/@/hooks/component/useFormItem'

  type OptionsItem = any

  export default defineComponent({
    name: 'InputRange',
    props: {
      value: {
        type: [String, Number, Boolean] as PropType<string | number | boolean>,
      },
      start: {
        type: Object,
        default: () => {},
      },
      end: {
        type: Object,
        default: () => {},
      },
    },
    emits: ['change'],
    setup(props) {
      const emitData = ref<any[]>([])
      // Embedded in the form, just use the hook binding to perform form verification
      const [state] = useRuleFormItem(props, 'value', 'change', emitData)

      // Processing options value
      const getOptions = computed((): OptionsItem[] => {
        const { start, end } = props
        if (!start || !end) return []

        return [start, end]
      })

      return { state, getOptions }
    },
  })
</script>
